<script setup>
import { defineProps, watch, ref } from 'vue'
import { mainStore } from '../../../store/mainStore'

const store = mainStore()

const props = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
  height: {
    type: String,
    default: () => '200px',
  },
})



const numToFixde = (num, key) => {
  
  let str = num
  const arr7Len = ['longitude', 'latitude', 'elevation', 'source']
  const arr2Len = ['position-x', 'position-y', 'position-z', 'speed', 'width', 'height', 'length', 'source', 'theta']
  if (arr2Len.includes(key)) {
    str = num?.toFixed(2)
  }

  if (arr7Len.includes(key)) {
    str = num?.toFixed(7)
  }

  return str
}

const handleClickRow = (item) => {
  if (store.currentCarId == item.id) {
    store.currentCarId = null
  } else {
    store.currentCarId = item.id
  }
  window.ThreePerceivedEffect.updataTableSelect(store.currentCarId)
}
</script>

<template>
  <div class="tableMore-container" :style="{ height }">
    <div class="row-title">
      <div class="row-title-item">序号</div>
      <div
        class="row-title-item"
        v-for="itn in columns"
        :style="{
          width: itn.width + 'px',
        }"
      >
        {{ itn.title }}
      </div>
    </div>

    <!-- 主体内容 -->
    <div @click="handleClickRow(item)" :class="['row', store.currentCarId == item.id ? 'selected' : '']" v-for="(item, index) in store.carData">
      <div class="row-item">{{ index + 1 }}</div>
      <div
        class="row-item"
        :style="{
          width: itn.width + 'px',
        }"
        v-for="itn in columns"
      >
        {{ numToFixde(item[itn.dataKey], itn.dataKey) }}
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.tableMore-container {
  width: 100%;
  // background-color: rebeccapurple;
  overflow-y: auto;
  overflow-x: auto;
  font-size: 14px;
  position: relative;
  padding-bottom: 10px;
}

.row {
  width: 100%;
  height: 20px;
  display: flex;
  .row-item {
    width: 100px;
    height: 100%;
    border: 1px solid #cccccc;
    border-bottom: none;
    border-left: none;
    flex-shrink: 0;
    padding-left: 6px;
    overflow: hidden;
  }
  .row-item:nth-child(1) {
    width: 50px;
    text-align: center;
    border-left: 1px solid #cccccc;
  }
}

.row-title {
  display: flex;
  position: sticky;
  top: 0;
  .row-title-item {
    // width: 100px;
    height: 26px;
    background-color: white;
    border: 1px solid #cccccc;
    flex-shrink: 0;
    border-left: none;
    line-height: 26px;
    padding: 0 6px;
  }
  .row-title-item:nth-child(1) {
    border-left: 1px solid #cccccc;
    width: 50px;
  }
}

.selected {
  .row-item {
    background-color: rgb(54, 205, 205);
  }
}
</style>
